<template>
    <div class="app-container calendar-list-container b-box">
        <el-button class="filter-item" type="primary" @click="cancel">返回</el-button>
        <el-button class="filter-item" type="primary" v-print="'#printBox'">打印</el-button>
        <div id="printBox" class="w-body info_form">
            <el-form ref="entity" label-width="100px" size="medium">
                <el-row class="r-form-row">
                    <el-col :span="24">
                        <div class="view-title">对账单</div>
                    </el-col>
                </el-row>
                <el-row class="r-form-row">
                    <el-col :span="6 " class="r-form-cell">
                        <el-form-item label="对账单:" prop="billNo" size="medium">
                            {{entity.billNo}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" class="r-form-cell">
                        <el-form-item label="客户:" prop="customerName">
                            {{entity.customerName}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="对账时间:">
                            {{entity.checkStartDate||''}} -- {{entity.checkEndDate||''}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <!--<el-row class="r-form-row">
          <el-col :span="24">
            <el-form-item label="订单号" >
              {{entity.orderNo}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="r-form-row">
          <el-col :span="24">
            <el-form-item label="来源单号">
              {{entity.businessCode}}
            </el-form-item>
          </el-col>
        </el-row>-->
                <el-row class="r-form-row">
                    <el-col :span="6" class="r-form-cell">
                        <el-form-item :label="totalName">
                            {{entity.amount}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" class="r-form-cell">
                        <el-form-item label="扣款金额:">
                            {{entity.deductionAmount}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" class="r-form-cell">
                        <el-form-item :label="syName">
                            {{entity.payAmount}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="剩余金额:">
                            {{entity.lostAmount}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <grid v-show="businessShow" gridTitle="单据明细" :columns="businessColumns" :multi="false"
                            :loading="false" ref="businessMainGrid" :queryEntity="{}" :pagination="false"
                            cellClassName="table-view-row" headerCellClassName="table-view-row">
                        </grid>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <grid v-show="true" gridTitle="商品明细" :columns="goodsColumns" :multi="false" :url="queryGoodsUrl"
                            :loading="true" ref="goodsMainGrid" :queryEntity="goodQueryEntity" :pagination="false"
                            cellClassName="table-view-row" headerCellClassName="table-view-row"></grid>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <grid v-show="adjeustShow" gridTitle="调整单" :columns="columns" :multi="false" :loading="false"
                            ref="mainGrid" :queryEntity="{}" :pagination="false" cellClassName="table-view-row"
                            headerCellClassName="table-view-row"></grid>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <grid v-show="payShow" :columns="payColumns" gridTitle="收付款" :multi="false" :url="queryUrl"
                            ref="payMainGrid" :loading="false" :queryEntity="queryEntity" :pagination="false"
                            cellClassName="table-view-row" headerCellClassName="table-view-row">
                        </grid>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24" style="height:30px"></el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        本厂确认:
                    </el-col>
                    <el-col :span="12">
                        客户确认:
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
    import request from '@/router/axios'
    import url from '@/const/apiURL'
    import grid from '@/components/Grid'
    import buttons from '@/components/Buttons'
    import { Message, MessageBox } from 'element-ui'
    import { initMenu } from "@/util/util";
    import { resolveUrlPath } from "@/util/util";
    import { mapGetters } from 'vuex'
    import { YesOrNoFormatter, PayTypeFormatter } from '@/const/dict'

    export default {
        components: { grid, buttons },
        data() {
            return {
                queryUrl: url.PAY_LIST_URL,
                queryGoodsUrl: url.BILL_GOODS_DETAIL_URL,
                disabled: true,
                opShow: false,
                totalName: "账单金额",
                syName: null,
                businessShow: false,
                adjeustShow: false,
                businessName: "",
                payShow: false,
                entity: {},
                billNo: null,
                goodQueryEntity: { billType: "ALL" },
                queryEntity: { billNo: null },
                goodsColumns: [
                    { label: this.businessName, width: 180, prop: 'bizCode', align: 'center' },
                    { label: this.global.modelName, width: 60, prop: 'goodsName', align: 'center' },
                    { label: this.global.modelProp, width: 60, prop: 'modelProp', align: 'center' },
                    { label: '物料名称', width: 290, prop: 'materialName', align: 'center' },
                    //{ label: '单位', width: 80, prop: 'unit', align: 'center' },
                    { label: '客户型号', width: 75, prop: 'customerModelName', align: 'center' },
                    { label: '单价', width: 60, prop: 'price', align: 'center' },
                    { label: '匹数', width: 50, prop: 'total', align: 'center' },
                    { label: '数量', width: 80, prop: 'quantity', align: 'center' },
                    { label: '总价', width: 90, prop: 'totalAmount', align: 'center', formatter: function (row) { return (row.totalAmount).toFixed(1) } }
                ],
                payColumns: [
                    { label: '付款单号', width: 180, prop: 'payCode', align: 'center' },
                    //  { label: '对账单号', width: 180, prop: 'billNo', align: 'center' },
                    { label: '类型', width: 100, prop: 'payType', align: 'center', formatter: PayTypeFormatter },
                    { label: '单位名称', width: 180, prop: 'bankUser', align: 'center' },
                    { label: '金额', width: 100, prop: 'amount', align: 'center' },
                    { label: '备注', width: 285, prop: 'remark', align: 'center' },
                    { label: '收付款时间', width: 100, prop: 'payTime', align: 'center' }
                ],
                businessColumns: [
                    { label: '订单号', width: 180, prop: 'orderNo', align: 'center' },
                    { label: this.businessName, width: 180, prop: 'businessCode', align: 'center' },
                    //{ label: '客户名称', width: 295, prop: 'customerName', align: 'center' },
                    { label: '数量', width: 90, prop: 'quantity', align: 'center' },
                    //  { label: '单价', width: 80, prop: 'price', align: 'center' },
                    { label: '金额', width: 100, prop: 'amount', align: 'center' },
                    { label: '扣款金额', width: 80, prop: 'deductionAmount', align: 'center' },
                    { label: '创建人', width: 120, prop: 'createUserName', align: 'center' },
                    { label: '创建时间', width: 100, prop: 'createTime', align: 'center' },
                    { label: '发货时间', width: 100, prop: 'sendTime', align: 'center' }
                ],
                columns: [
                    { label: '调整单号', width: 180, prop: 'adjustNo', align: 'center' },
                    { label: '对账单号', width: 180, prop: 'billNo', align: 'center' },
                    { label: '客户名称', width: 180, prop: 'customerName', align: 'center' },
                    { label: '金额', width: 100, prop: 'amount', align: 'center' },
                    { label: '原因', width: 200, prop: 'remark', align: 'center' },
                    // { label: '创建人', width: 120, prop: 'createUserName', align: 'center' },
                    { label: '创建时间', width: 100, prop: 'createTime', align: 'center' }
                ]
            }
        },
        computed: {
            ...mapGetters([
                'permissions'
            ])
        },
        created() {
            this.billNo = this.$route.query.billNo
            this.queryEntity.billNo = this.billNo
            this.goodQueryEntity.billNo = this.billNo
            this.goodQueryEntity.billSource = this.$route.query.billSource
            this.billType = this.$route.query.billType
            if (this.billType == 'IN') {
                this.syName = "已收金额"
            } else {
                this.syName = "已付金额"
            }

            if (this.$route.query.billSource == "BUSINESS") {
                this.businessName = "加工单号"
            } else if (this.$route.query.billSource == "PURCHASE") {
                this.businessName = "采购单号"
            } else if (this.$route.query.billSource == "ORDER") {
                this.businessName = "发货单号"
            } else {
                this.businessName = "销售单号"
            }
            this.goodsColumns[0] = { label: this.businessName, width: 180, prop: 'bizCode', align: 'center' };
            this.businessColumns[1] = { label: this.businessName, width: 180, prop: 'businessCode', align: 'center' },
                this.init();
        },
        methods: {
            init() {
                this.viewOp(this.billNo).then((data) => {
                    if (data) {
                        if (data.businessVOS) {
                            this.businessShow = data.businessVOS.length != 0
                        }
                        if (data.adjustVos) {
                            this.adjeustShow = data.adjustVos.length != 0
                        }
                        this.payShow = (data.orderStatus == 'FINISH' || data.orderStatus == 'SETTLEMENT')
                        this.entity = data
                        this.$refs['mainGrid'].initData(data.adjustVos)
                        this.$refs['businessMainGrid'].initData(data.businessVOS)
                        this.$refs['payMainGrid'].doQuery(null, this.queryEntity)
                    }
                })
            },
            cancel() {
                this.$router.go(-1)
            },
            viewOp(billNo) {
                return request({
                    url: url.FINA_BILL_VIEW_URL,
                    method: 'post',
                    params: { billNo },
                    data: { billNo }
                })
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .w-body {
        padding-top: 8px;
        width: 1024px;
    }

    .w-table {
        border: 1px solid #ebeef5;
    }

    .w-table-title {
        border: 1px solid #ebeef5;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
        line-height: 23px;
        display: inline-block;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
        vertical-align: middle;
        width: 100%;
        font-size: 14px;
        color: gray;
    }

    .view-title {
        width: 100%;
        height: 60px;
        font-size: 24px;
        text-align: center;
        font-weight: bold;
    }

    .grid-rq {
        border: 1px solid black !important;
    }
</style>